<template>
	<div class="location">
		<div v-if="!loading && position">
			<div>经度：{{ position.lng }}</div>
			<div>纬度：{{ position.lat }}</div>
		</div>
		<div v-if="loading">正在获取当前位置...</div>
		<div v-if="!loading && !position">无法获取当前位置</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				loading: true,
				position: null
			};
		},
		mounted() {
			this.getCurrentPosition();
		},
		methods: {
			getCurrentPosition() {
				uni.getLocation({
					type: 'gcj02',
					success: (res) => {
						this.loading = false;
						this.position = {
							lng: '1',
							lat: '2'
						}
						this.$emit('handle-event', this.position)
					},
					fail: () => {
						this.loading = false;
						this.position = null;
					}
				});
			}
		}
	};
</script>

<style>
	.location {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 100%;
	}
</style>